<template>
  <div class="book-list">
    <el-table ref="filterTable"
              :data="showData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              style="width: 100%"
              height="580"
              :defaultSort="{prop: 'xpk_1913040735_id'}"
              @filter-change="handleFilterChange">
      <el-table-column prop="xpk_1913040735_bookId"
                       label="图书编号"
                       sortable
                       width="120px" />
      <el-table-column prop="xpk_1913040735_bookName"
                       label="图书名称" />
      <el-table-column prop="xpk_1913040735_bookPrice"
                       label="图书价格"
                       sortable />
      <el-table-column prop="xpk_1913040735_bookType"
                       label="图书类型"
                       :filters="filters"
                       columnKey="xpk_1913040735_bookType"
                       sortable
                       :filterMethod="filterTag">
        <template slot-scope="scope">
          <el-tag disableTransitions>
            {{ scope.row.xpk_1913040735_bookType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="xpk_1913040735_bookPicture"
                       label="图书封面">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="process + scope.row.xpk_1913040735_bookPicture"
            :previewSrcList="[process + scope.row.xpk_1913040735_bookPicture]"
            fit="contain"/>
        </template>
      </el-table-column>
      <template v-if="$store.state.user.role == 1">
        <el-table-column label="操作"
                         width="150">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination background
                   align="center"
                   layout="total, sizes, prev, pager, next, jumper"
                   :currentPage="currentPage"
                   :pageSizes="[1,5,10,20]"
                   :pageSize="pageSize"
                   :total="showData.length"
                   hideOnSinglePage
                   class="book-list__pagination"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { deleteBook, getBooks, getBookTypes } from '../api'

export default {
  async mounted () {
    if (process.env.NODE_ENV == 'development') {
      this.process = 'http://192.168.43.158:8088/'
    } else if (process.env.NODE_ENV == 'production') {
      this.process = 'http://39.105.201.210:8088/'
    }
    await getBooks().then(res => {
      console.log(res)
      this.tableData = res
    }).catch(err => {
      console.log(err)
    })
    this.showData = this.tableData.slice()
    await getBookTypes().then(res => {
      var arr = []
      res.forEach(item => {
        arr.push({ text: item.xpk_1913040735_bookType, value: item.xpk_1913040735_bookTypeId })
      })
      this.filters = arr
    })
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      tableData: [],
      showData: [],
      filters: [],
      process: ''
    }
  },
  methods: {
    filterTag (value, row) {
      // console.log(row)
      return row.xpk_1913040735_bookTypeId == value
    },
    async handleEdit (index, row) {
      console.log(row)
      sessionStorage.setItem('book_edit_data', JSON.stringify(row))
      this.$router.push({ name: 'editBook' })
    },
    async handleDelete (index, row) {
      console.log(row.xpk_1913040735_bookId)
      await deleteBook(row.xpk_1913040735_bookId).then(res => {
        console.log(res)
        const { code, msg } = res
        if (code == '200') {
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
          var timer = setTimeout(() => {
            this.$router.go(0)
            clearTimeout(timer)
          }, 1000)
        }
      })
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleFilterChange (val) {
      console.log(val)
      if (val.xpk_1913040735_bookType.length) {
        console.log(this.filters)
        this.showData = this.tableData.filter(item => {
          return val.xpk_1913040735_bookType.indexOf(item.xpk_1913040735_bookTypeId) > -1
        })
        console.log(this.showData)
      } else {
        this.showData = this.tableData.slice()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/index.less';

.book-list {
  margin: 16px 32px;
  &__pagination {
    margin: 20px 0;
  }
  &__img {
    width: 100px;
  }
  .cell {
    text-align: center;
  }
}
.el-table th > .cell {
  text-align: center;
}
</style>
